<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>20.隔行变色 - %的运用.html</title>
		<script>
			window.onload = function () {
				var oUl = document.querySelectorAll("ul")[0];
				var aLi = oUl.querySelectorAll("li");
				// alert(aLi.length);
				var aColors = ['#f00', 'yellow'];
				
				for ( var i = 0, len = aLi.length; i < len; i++ ) {
					// 奇数行添加上red
					/** if ( i % 2 == 0 ) {
						aLi[i].style.backgroundColor = 'red';						
					// 偶数行添加上yellow
					} else {
						aLi[i].style.backgroundColor = 'yellow';
					} */
					
					// 简易写法
					// console.log(i % aColors.length);
					aLi[i].style.backgroundColor = aColors[i % aColors.length];
				}
			};
		</script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>	
	</body>
</html>
